<template>
	<div>
		<!--主机下所属实例列表-->
		
		<listTable
			ref="listTable"
			v-if="listOption" 
			:options="listOption"
			@command="listCommand"
			></listTable>
			
	</div>
</template>

<script>
import { listenner } from "@/utils/statuslistener";
import { appStatusFilter } from '@/filters/status/index';
import listTable from "@/view/components/table/listTable";
import { apiUrls, getInstInfoByIp, getInstStatus } from "@/service/swagger/AcAppInstController"
import { stop, start , destroy , deleteSL } from "@/service/swagger/InstanceController"


export default {
	props: [

	],
	components: {
		listTable,
	},
	data() {
		return {
			listOption: {
				noPage: false,
				// 列表api
				listApi: {
					serviceFN: getInstInfoByIp,
					//url : apiUrls.getInstInfoByIp,
					//type : "POST",
					params: {
						ip: this.$route.query.ip,
					}
				},
				// 表头设置
				header: [{
					label: "ID/实例名称",
					width: "200",
					align: "left",
					html: (row) => {
						return `<span class="">${row.instId}<br />${row.instName}</span>`
					}
				}, {
					label: "版本号",
					propName: "appVersion",
				}, {
					label: "应用类型",
					propName: "appType",
				}, {
					label: "部署类型",
					html: (row) => {
						switch (row.deployType) {
							case 1: return "容器"; break;
							case 2: return "裸应用"; break;
							default: return "未知"; break;
						}
					},
				}, {
					label: "应用名",
					propName: "appName",
				}, {
					label: "创建时间",
					propName: "createTime",
				}, {
					label: "状态",
					propName: "status",
					html: (row) => {
						return appStatusFilter(row.status)
					},
				}, {
					label: "操作",
					width: "",
					btns: [{
						label: "停止",
						show: (row) => {
							// 运行中 
							// 可以被删除 
							// 无其他进行中状态
							return row.status == 1
						},
						commandName: "stopSL",
					}, {
						label: "启动",
						show: (row) => {
							// 已停止
							// 可以被删除 
							// 无其他进行中状态
							return row.status == 2
						},
						commandName: "startSL",
					}, {
						label: "销毁",
						show: (row) => {
							// 停止 
							// 可以被删除 
							// 无其他进行中状态
							return row.status == 2
						},
						commandName: "destroySL",
					}, {
						label: "删除",
						show: (row) => {
							// 异常 
							// 可以被删除 
							// 无其他进行中状态
							return row.status == 4
						},
						commandName: "deleteSL",
					}, {
						label: "详情",
						commandName: "goDetail",
					}],
					btnGroups: []
				}]
			}
		}
	},
	mounted() {
		this.search();
	},
	methods: {
		listCommand(command, row, index) {
			if (command && this[command]) {
				this[command](row, index);
			}
		},

		search(params) {
			if (this.$refs.listTable) {
				this.$refs.listTable.search(params)
			}
		},
		refresh() {
			this.search();
		},
		initData(_data) {
			this.$refs.listTable.serviceCallBack({
				data: _data
			})
		},
		listLoaded(tableData) {
			console.log("页面列表 search 完成", tableData);
			const statusStatic = (status) => {
				// 是否是稳定状态
				const isStatic = !(appStatusFilter(status).indexOf("...") > -1);
				return isStatic;
			}
			let unStaticArr = [];
			// 添加  status 监听
			tableData.forEach(el => {
				if (!statusStatic(el.status)) {
					unStaticArr.push(el.instId)
				}
			});
			if (unStaticArr && unStaticArr.length) {
				listenner({
					api: {
						serviceFN: getInstStatus,
						params: unStaticArr,
					},
					callBack: (ret) => {
						let hasAllStatusStaticed = true;
						ret.data.forEach(data => {
							if (!statusStatic(data.status)) {
								hasAllStatusStaticed = false;
							}
							tableData.forEach(el => {
								if (data.instId == el.instId) {
									el.status = data.status;
									if(el.status == 3){ // 已销毁
										this.refresh();
									}
								}
							});
						});
						this.initData(tableData)
						return hasAllStatusStaticed;
					},
				}, this)
			}
		},

		startSL(row, index) {

			this.$confirm(`确定要对该实例【${row.instName}】进行启动操作吗？`, "启动实例", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				start({ id: row.instId }).then(ret => {
					this.search();
				})
			});

		},
		stopSL(row, index) {

			this.$confirm(`确定要对该实例【${row.instName}】进行停止操作吗？`, "停止实例", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				stop({ id: row.instId }).then(ret => {
					this.search();
				})
			});

		},
		destroySL(row, index) {

			this.$confirm(`销毁操作无法恢复，确定要对该实例【${row.instName}】进行销毁操作吗？`, "销毁实例", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				destroy({ id: row.instId }).then(ret => {
					this.search();
				})
			});

		},
		deleteSL(row, index) {

			this.$confirm(`删除操作无法恢复，确定要对该实例【${row.instName}】进行删除操作吗？`, "删除实例", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				deleteSL(  row.instId ).then(ret => {
					this.search();
				})
			});

		},
		goDetail(row, index) {
			// 跳转实例详情
			this.$router.push({
				path: '/sl/yydetail',
				query: {
					appType: 'yingyong',
					id: row ? row.instId : '',
					instConf: row.instConf,
				}
			})
			console.log("跳转实例详情：", row, index)

		}

	}

}
</script>

<style>
</style>